<template>
  <div style="display: flex; height: 100%; flex: 1;">
    <HierarchyList :pagination="pagination" :columns="columns" :load-data="loadData"
                   ref="refHiSetting" :search-form="searchItems" :create-label="props.createLabel" :add-item="addSetting"/>
    <EditDialog ref="refEditDlg" :columns="columns" :rules="rules" :submit="onSubmit"
                :form-label-width="100" :is-show-dialog="false"/>
  </div>
</template>

<script setup lang="ts">

import {onMounted, reactive, ref} from "vue";

import {buildSearchForms} from "@/data/PageData";
import {msgError} from "@/utils/InfoUtil";

import EditDialog from "@/components/common/EditDialog.vue";
import HierarchyList from "@/widget/list/HierarchyList.vue";

const refHiSetting = ref();
const refEditDlg = ref();

const currentItem = ref();
const searchItems = ref(buildSearchForms('设置'));

const props = withDefaults(defineProps<{
  loadSetting?: any,
  saveSetting?: any,
  canEdit?: boolean,
  createLabel?: string,
}>(), {
  canEdit: true,
  createLabel: '增加设置',
});

const currentId = ref('');

const rules = reactive({
  name: [{required: true, message: '请输入设置名称', trigger: ['blur', 'change']},],
})

const loadData = async (params: any) => {
  let result;

  if (props.loadSetting) {
    result = await props.loadSetting(params);
  }

  return result;
}

const onSubmit = async (item: Record<string, any>, editType: string) => {
  if (props.saveSetting) {
    const result = await props.saveSetting(item);

    if (result.code === 0) {
      searchData();
    } else {
      msgError(result.message);
    }

    return result;
  }
}

const newSetting = () => {
  return {
    state: 1,
  };
}

const pagination = ref<Pagination>({
  current: 1,
  pageSize: 20,
  total: 0,
});

const columns = ref([
  {
    id: 'id',
    name: '标识',
    hideCol: true,
    show: false,
    canEdit: false,
  },
  {
    id: 'name',
    name: '设置名称',
    show: true,
  },
  {
    id: 'value',
    name: '设置值',
    show: true,
  },
  {
    id: 'comment',
    name: '说明',
    show: true,
  },
  {
    id: 'state',
    name: '状态',
    show: true,
    tag: 'true',
    type: 'select',
    tagType: (tag: number) => { return tag === 1 ? 'success' : 'danger'; },
    tagText: (tag: number) => { return tag === 1 ? '启用' : '禁用'; },
    options: [
      {
        value: 1,
        label: '启用'
      },
      {
        value: 2,
        label: '禁用'
      }
    ]
  },
  {
    id: 'operation',
    name: '操作',
    show: true,
    canEdit: false,
    hideCol: true,
    fixed: 'right',
    operations: [
      {
        name: '编辑',
        iconType: 'primary',
        callback: (data: any, row: any, index: number) => {
          currentItem.value = row;
          refEditDlg.value?.editUpdate('编辑设置', row);
        }
      },
      {
        type: 'confirm',
        name: '删除',
        confirm: (data: any, row: any, index: number) => {

        },
        cancel: (data: any, index: number) => {
          const row = data[index];
        }
      }
    ]
  }
]);

const addSetting = () => {
  currentItem.value = newSetting();
  refEditDlg.value?.editAdd('新增设置', currentItem.value);
  searchData();
}

const refresh = (params: any) => {
  refHiSetting.value?.refresh({
    ...params,
  })
}

const searchData = () => {
  refresh({id: currentId.value});
}

onMounted(() => {
  if (!props.canEdit) {
    columns.value.pop();
  }
})

defineExpose({
  refresh,
})

</script>

<style scoped>
.el-form-item-class .el-form-item__label {
  font-size: 12px;
}

</style>
